<template>
<!-- 查询商品 -->
	<div id="idSupplierList">
		<div id="sousuo">
			<el-form :inline="true" :model="searchObj" class="demo-form-inline">
				<el-form-item label="商品名称">
					<el-input v-model="searchObj.name" placeholder="请输入商品名称" style="width: 300px;"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" round @click="searchgoods">搜索</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-table :data="SupplierAry" style="width: 100%">
		  <el-table-column prop="id" label="商品编号" width="180">
		  </el-table-column>
		  <el-table-column prop="name" label="商品名称" width="180">
		  </el-table-column>
		  <el-table-column prop="goodsCategoryId" label="类型">
		  </el-table-column>
		  <el-table-column prop="unit" label="单位">
		  </el-table-column>
		  <el-table-column prop="imgLink" label="商品图片">
        <template slot-scope="scope">
          <el-avatar :size="45" shape="square"  :src="scope.row.imgLink" @error="errorHandler">
            <img :src="scope.row.imgLink"/>
          </el-avatar>
        </template>
		  </el-table-column>
		  <!--操作列-->
		  <el-table-column label="操作">
		      <template slot-scope="scope">
		      <el-button
					size="small"
					type="primary"
					round
					icon=""
					@click="viewsupplier(scope.row)">供应</el-button>
		      </template>
		  </el-table-column>
	  </el-table>

		 <!---分页组件-->
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-sizes="pageSizeList"
       :page-size="pageSize"
       layout="total, sizes, prev, pager, next, jumper"
       :total="total">
     </el-pagination>
    <!--  对话框  -->
    <el-dialog title="供应商品" :visible.sync="supplier" width="600px">
      <el-form :model="supplierform">
        <el-form-item label="商品编号" :label-width="formLabelWidth">
          <el-input v-model="supplierform.goodsId" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="supplierform.name" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单位" :label-width="formLabelWidth">
          <el-input v-model="supplierform.unit" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可供应价格" :label-width="formLabelWidth">
          <el-input v-model="supplierform.price" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="supplier = false">取 消</el-button>
        <el-button type="primary" @click="supplierGongying">确定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default{
		data() {
			return{
			  //对话框表单
        supplierform:{},
        //对话框展示
        supplier: false,
				//表格数组
				SupplierAry:[],
				// 当前页号
				currentPage: 1,
				// 当前页大小
				pageSize: 5,
				// 总记录数
				total: 0,
				// 页大小列表
				pageSizeList: [2, 5, 10, 20],
				// 添加表单的对象
				addForm: {},
				// lable宽度
				formLabelWidth: '120px',
        //查询
				searchObj: {
				      name:""
				      },

			}
		},
		methods:{
      //表格操作列提交
      async supplierGongying(){
        const {data: res} = await this.$http.post(`/supplierProduct/supplierProductByIdAdd/`,this.supplierform)
        //消息提示
        this.$message({
          showClose: true,
          message: '供应成功',
          type: 'success'
        });
        this.supplier=false
      },
      // 表单查询
      searchgoods() {
        // 查询
        this.currentPage = 1
        this.SupplierPage()
      },
			// 页大小改变
			handleSizeChange(val) {
				this.pageSize = val
				this.SupplierPage()
			},

			// 页号改变
			handleCurrentChange(val) {
			  this.currentPage = val
        this.SupplierPage()
			},
			//分页查询商品信息
			async SupplierPage(){
				const {data: res} = await this.$http.post(`goodsInfo/SupplierListPage/
				${this.currentPage}/${this.pageSize}`,this.searchObj)
				this.SupplierAry=res.list
        console.log("商品信息",res.list)
				this.total=res.total
			},
      //根据id查询对应的数据
      async viewsupplier(row){
        console.log(row)
        //打开对话框
        this.supplier = true
        //用row回显数据
        this.supplierform.unit=row.unit
        this.supplierform.goodsId= row.id
        this.supplierform.name= row.name
        //拿用户id
        this.sysUsersId=this.$store.state.user.sysUsersId
        console.log(this.sysUsersId)
        //定义用户id
        let sysUsersId=this.sysUsersId
        const {data: res} = await this.$http.post(`/supplierInfo/SupplierDataPage/${sysUsersId}`)
        console.log("222",res)
        let supplierId=res.supplierId
        console.log(supplierId)
        this.supplierform.supplierId=supplierId
      },
      //头像展示失败
      errorHandler() {
        return true
      },
		},
		created() {
			this.SupplierPage()
		}
	}
</script>

<style scoped>
	#sousuo{
		position: relative;
		left: 450px;
	}
  #supplierform input{
    width: 300px;
  }

</style>